@import "../normalize.less";
@import "../mixins.less";
@import "../variables.less";

//@import "responsive.less";

.hide{
	display: none;
}
//
@widthAnuncio: 		60%;
@colorTitulo:		@azulClaro5;
@colorSenha:		white;
@colorInfo:			white;
@borderColor:		@azulEscuro6;
//
body{
	width: 100%;
	height: 100%;
	background: @azulEscuro8;
}
aside{
	display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
	
	.box-sizing(border-box);
}
#anuncio{
	width: @widthAnuncio;
	left: 0;
	border-right: 2px solid @borderColor;
	z-index: 1;
}
#senhas{
	width: 100 - @widthAnuncio;
	left: @widthAnuncio;
	
	.box-shadow(0 0 80px @azulEscuro9);
	z-index: 2;
}
#atual{
	display: none;
	h1{
		color: @colorTitulo;
		font-size: 56px;
		margin: 20px 0 0;
		text-align: center;
	}
	h2{
		color: @colorSenha;
		font-size: 136px;
		line-height: 1.1;
		margin: 0 0 8%;
		text-align: center;
	}
	border-bottom: 3px solid @borderColor;
}
#passadas{
	display: none;
	h1{
		color: @colorTitulo;
		font-size: 36px;
		margin: 7% 0 3%;
		text-align: center;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}
	li{
		width: 400px;
		clear: both;
		display: none;
		margin: 7px auto;
		line-height: 1.2;
		clear: both;
		border-top: 1px solid darken(@borderColor,5%);
		&:first-child{
			border:none;			
		}
	}
	h2{
		float: left;
		display: inline;
		color: @colorSenha;
		font-size: 56px;
		margin: 0 10px;
		text-align: left;
	}
	h3{
		float: right;
		display: inline;
		color: @colorInfo;
		font-size: 36px;
		margin: 0 10px;
		text-align: right;
		line-height: 1.9;
	}
}